<template>
    <div class="col606266">
        <el-row>
            <el-col :span="8">
                <el-form :model="distributorData1" status-icon
                    :rules="distributorRules1" ref="distributorData1" label-width="100px"
                >
                    <el-form-item label="主题色：">
                        <el-radio-group v-model="distributorData1.colType">
                            <el-radio label="1">单色</el-radio>
                            <el-radio label="2">向右渐变色</el-radio>
                        </el-radio-group>
                        <div class="disFlex">
                            <div class="teAliRight">
                                {{distributorData1.colType == 1 ? '选择单色' : '渐变左色'}}：
                            </div>
                            <div class="flex1">
                                <el-color-picker v-model="distributorData1.color1"
                                ></el-color-picker>
                            </div>
                        </div>
                        <div class="disFlex" v-if="distributorData1.colType == 2">
                            <div class="teAliRight">
                                渐变右色：
                            </div>
                            <div class="flex1">
                                <el-color-picker v-model="distributorData1.color2"
                                ></el-color-picker>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="subDistributor1"
                        size="small"
                      >
                        提交
                      </el-button>
                  </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            distributorData1: {
                colType: '1', color1: null, color2: null
            },
            distributorRules1: {
                
            }
        }
    },
    mounted() {

    },
    methods: {
        subDistributor1() {
            this.$refs['distributorData1'].validate(valid => {
                if (valid) {
                    if(this.distributorData1.color1 == null) {
                        return this.$message({
                            message: `请选择${this.distributorData1.colType == 1 ? '单色' : '渐变左色'}`,
                            type: 'warning'
                        });
                    }
                    if(this.distributorData1.color2 == null && this.distributorData1.colType == 2) {
                        return this.$message({
                            message: `请选择渐变右色`,
                            type: 'warning'
                        });
                    }
                    console.log(this.distributorData1);

                }
            })
        }
    }
}
</script>